<template>
  <div class="m-container">
    <nav-header></nav-header>
    <div class="app-container">
      <!-- 流程条 -->
      <div class="progress bg1" :class="{'bg2': goodsInfo.refundStatus == '0' || goodsInfo.refundStatus == '1', 'bg3': goodsInfo.refundStatus == '2'}"></div>
      <div class="m-refund clearfix">
        <div class="m-left fl" v-if="goodsInfo.refundStatus != '2'">
          <div class="item">
            <span class="title">退款商品：</span>
            <div class="m-goods-info clearfix">
              <div class="m-goods-img fl">
                <img v-lazy="goodsInfo.goodsMainphotoPath">
              </div>
              <div class="info">
                <p>{{goodsInfo.goodName}} {{goodsInfo.goodsSerial}}</p>
                <div v-if="goodsInfo.goodsSpecContent">
                  <span>颜色：{{goodsInfo.goodsSpecContent[0]}}</span>
                  <span>尺码：{{goodsInfo.goodsSpecContent[1]}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <span class="title">服务类型：</span>
            <div class="r-item">
              <w-radio :label="1" name="refundtype" v-model="type" :disabled="disabled">仅退款</w-radio>
              <w-radio :label="2" name="refundtype" v-model="type" :disabled="disabled">退货退款</w-radio>
            </div>
          </div>
          <div class="item">
            <span class="title">退款原因：</span>
            <div class="r-item input">
              <w-select :options="resonOptions" v-model="userApplyReason" :disabled="disabled"></w-select>
            </div>
          </div>
          <div class="item">
            <span class="title">退款金额：</span>
            <div class="r-item input">
              <w-input rule="isEmpty|onlyMoney" error="必填|格式错误" v-model="refund" @on-change="_changeInputVal(refund)" :disabled="disabled"></w-input>
              <span class="tip">最多￥{{goodsInfo.goodsPrice | currency}}</span>
            </div>
          </div>
          <div class="item">
            <span class="title">退款说明：</span>
            <div class="r-item input textarea">
              <w-input type="textarea" holder="退款说明" rule="isEmpty" error="必填" v-model="userApplyExplain" :disabled="disabled"></w-input>
            </div>
          </div>
          <div class="item">
            <span class="title">上传图片：</span>
            <div class="r-item" v-if="!disabled">
              <w-upload v-model="redundPic" :width="90" :height="90" type="refund" :max="6" :disabled="disabled"></w-upload>
            </div>
            <div class="r-item" v-if="goodsInfo.refundInfo && goodsInfo.refundInfo.userApplyImg && goodsInfo.refundInfo.userApplyImg.length && disabled">
              <ul>
                <li v-for="(img, index) in JSON.parse(goodsInfo.refundInfo.userApplyImg || '[]')" :key="index">
                  <img v-lazy="img">
                </li>
              </ul>
            </div>
          </div>
          <div class="btn sub-btn" v-if="(!goodsInfo.refundStatus || goodsInfo.refundStatus == '3') && goodsInfo.refundStatus != '0'">
            <w-button type="main" @on-click="onConfirmRefund">提交</w-button>
          </div>
        </div>

        <!-- 已完成退款退货 -->
        <div class="m-left fl" v-else>
          <div class="top-title">
            <p>退款成功时间：{{goodsInfo.refundInfo.audit_date}}</p>
            <p>退款总金额：<span class="c-main">￥{{refund | currency}}</span></p>
          </div>
          <div class="history-list">
            <p>协商历史</p>
            <div class="history-info" v-if="historyList && historyList.length">

              <div class="h-item clearfix" v-for="(item, index) in historyList" :key="index">
                <div class="icon-img fl">
                  <img src="../my/assets/shop_set.png" alt="" v-if="!item.storeLogo">
                  <img v-lazy="item.storeLogo" v-else>
                </div>
                <div class="fr" style="width: 92%;">
                  <div class="title-all">
                    <span>{{item.storeName}}</span>
                    <span class="time">{{item.msgCtime}}</span>
                  </div>
                  <div class="info">
                    <p>{{item.body}}</p>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        <!-- 右侧：订单详情 -->
        <div class="m-right fr">
          <p class="tit">订单详情</p>
          <div class="goods clearfix">
            <div class="img fl">
              <img v-lazy="goodsInfo.goodsMainphotoPath">
            </div>
            <div class="info" v-if="goodsInfo.goodsSpecContent">
              <p>{{goodsInfo.goodName}} {{goodsInfo.goodsSerial}}</p>
              <span>颜色：{{goodsInfo.goodsSpecContent[0]}}</span>
              <br>
              <span>尺码：{{goodsInfo.goodsSpecContent[1]}}</span>
            </div>
          </div>
          <!-- 订单商家详情 -->
          <div class="order-info">
            <div class="or-item clearfix">
              <span class="title">卖家：</span>
              <span class="info">{{goodsInfo.storeName}}</span>
              <span 
                class="iconfont ico-concant connect-user c-main fr" style="cursor: pointer;" 
                @click="onContactShop(goodsInfo.storeId, goodsInfo.goodsId, goodsInfo.goodName, goodsInfo.goodsMainphotoPath)"></span>
            </div>
            <div class="or-item">
              <span class="title">订单编号：</span>
              <span class="info" style="color: #1C9EFF">{{goodsInfo.orderId}}</span>
            </div>
            <div class="or-item">
              <span class="title">成交时间：</span>
              <span class="info">{{goodsInfo.addTime}}</span>
            </div>
            <div class="or-item">
              <span class="title">单价：</span>
              <span class="info">￥{{goodsInfo.goodsSinglePrice | currency}}</span>
            </div>
            <div class="or-item">
              <span class="title">邮费：</span>
              <span class="info">￥{{goodsInfo.shipPrice | currency}}</span>
            </div>
            <div class="or-item">
              <span class="title">商品总价：</span>
              <span class="info">￥{{goodsInfo.goodsPrice | currency}}</span>
            </div>

            <!-- 其他信息 -->
            <div v-if="goodsInfo.refundStatus == '0' || goodsInfo.refundStatus == '1' || goodsInfo.refundStatus == '2'">
              <div class="or-item">
                <span class="title">退款金额：</span>
                <span class="info">￥{{refund | currency}}</span>
              </div>
              <div class="or-item">
                <span class="title">原因：</span>
                <span class="info">{{userApplyReason}}</span>
              </div>
              <div class="or-item">
                <span class="title">要求：</span>
                <span class="info">{{userApplyExplain}}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import header from './components/header'
import { apiRefundOrderInfo, apiSelectdictionaryDataByTypeId, apiRefundOrderFormById, apiRefundOrderGoods, apiRefundHistory } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      disabled: false,
      goodsInfo: {},
      historyList: [], // 协商历史
      shipInfo: [],
      showSuccess: false, // 已完成退款、退货
      actived: false,
      resonOptions: [],
      // 退款参数
      userApplyReason: '',
      userApplyExplain: '',
      redundPic: [],
      type: this.$route.params.type == 'pg' ? '2' : '1',
      refund: '' // 退款金额
    }
  },
  created() {
    if (!this.$route.query.id || !this.$route.query.carid) return
    this.fetchRefundOrder()
    // 退款原因字典
    apiSelectdictionaryDataByTypeId().then(data => {
      this.resonOptions = data.DictionaryDataList
      this.resonOptions.forEach(item => {
        item.value = item.dataName
        item.label = item.dataName
      })
    })
  },
  methods: {
    /**
     * 获取退款订单的详细信息
     */
    fetchRefundOrder() {
      apiRefundOrderInfo(this.token, this.$route.query.id, this.$route.query.carid).then(data => {
        this.goodsInfo = JSON.parse(data.goodsInfo || '{}')
        // 已申请退款时，不可再次申请
        if (this.goodsInfo.refundStatus == '0' || this.goodsInfo.refundStatus == '1') {
          this.type = this.goodsInfo.refundType
          this.userApplyReason = this.goodsInfo.refundInfo.userApplyReason
          this.userApplyExplain = this.goodsInfo.refundInfo.userApplyExplain
          this.refund = this.goodsInfo.refundInfo.refund_price
          this.disabled = true // 控制不可更改
        }
        if (this.goodsInfo.refundStatus == '2') {
          // 获取协商历史记录
          apiRefundHistory(this.token, this.$route.query.id, this.$route.query.carid).then(data => {
            this.historyList = data.chatMsg || []
          })
        }
      })
    },
    /**
     * 校验当前输入的退款金额与实际可退金额
     */
    _changeInputVal(val) {
      if (!val) return
      if (parseFloat(val) > parseFloat(this.goodsInfo.goodsPrice)) {
        this.$toast('退款金额不可大于可退款金额', () => {
          this.refund = ''
        })
      }
    },
    /**
     * 退款
     */
    onConfirmRefund() {
      if (!this.userApplyReason) {
        this.$toast('请选择退款原因')
        return
      }
      if (!this.refund) {
        this.$toast('请输入退款金额')
        return
      }
      if (parseFloat(this.refund) > parseFloat(this.goodsInfo.goodsPrice)) {
        this.$toast('退款金额不可大于可退款金额')
        return
      }
      if (!this.userApplyExplain) {
        this.$toast('请填写退款说明')
        return
      }
      if (!this.redundPic || !this.redundPic.length) {
        this.$toast('请上传图片')
        return
      }
      // 仅退款
      if (this.type == '1') {
        apiRefundOrderFormById(this.token, this.$route.query.id, this.userApplyReason, this.userApplyExplain, this.redundPic, 1, this.$route.query.carid, 1, Number(this.refund)).then(data => {
          this.fetchRefundOrder()
        })
        return
      }
      // 退货退款
      apiRefundOrderGoods(this.token, this.$route.query.id, this.userApplyReason, this.userApplyExplain, this.redundPic, Number(this.refund), this.$route.query.carid, 2).then(data => {
        this.fetchRefundOrder()
      })
    },
    /**
     * 展示物流弹框
     */
    // _showDevlivery() {
    //   this.actived = !this.actived
    //   this.lookDevPanel = true
    // },
    /**
     * 联系店家
     */
    onContactShop(storeId, goodsId, goodName, goodImg) {
      const _this = this
      this.$store.dispatch('fetchUserRole', {
        token: this.token,
        callback(role) {
          _this.$store.dispatch('fetchCustomerByStoreId', {
            mobile: _this.$store.getters.mobile,
            storeId: storeId,
            goodsId: goodsId,
            firstMsg: JSON.stringify({
              'id': goodsId,
              'goods_main_photo': goodImg,
              'goodsName': goodName
            })
          })
        }
      })
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  components: {
    'nav-header': header
  }
}
</script>

<style lang="scss">
.m-container {
  .app-container {
    width: 990px;
    min-width: 990px;
    .item {
      .form-control {
        height: 28px;
      }
      .textarea {
        .form-control {
          height: 120px !important;
        }
        .w-input .error-tip {
          margin-top: 120px;
          left: 0;
        }
      }
      .m-radio {
        margin-right: 80px;
      }
    }
    .input {
      .w-input .error-tip {
        margin-top: 10px;
        z-index: 2;
        right: -110px;
      }
    }
    
    .sub-btn {
      .btn {
        width: 140px;
        height: 28px;
        border-radius:4px;
      }
    }
    .multi-upload-wrap label::before {
      content: "";
      width: 100%;
      height: 100%;
      background-size: cover;
      z-index: 2;
      position: absolute;
      right: 0;
      background: url(../my/assets/upload_img.png) no-repeat;
    }
  }
}
</style>

<style lang="scss" scoped>
.m-container {
  background-color: #ffffff;
  padding-bottom: 20px
}
.progress {
  margin: 20px auto;
  width: 100%;
  height: 38px;
  &.bg1 {
    background: url(../my/assets/refund_01.png)
  }
  &.bg2 {
    background: url(../my/assets/refund_02.png)
  }
  &.bg3 {
    background: url(../my/assets/refund_03.png)
  }
}
.m-refund {
  width: 100%;
  min-height: 700px;
  border: 1px solid #dddddd;
  .m-left {
    width: 738px;
    display: inline-block;
    padding: 20px 26px 0 30px;
    .item {
      margin-bottom: 20px;
      .title {
        vertical-align: top
      }
      .m-goods-info {
        width: 80%;
        display: inline-block;
        .m-goods-img {
          width: 92px;
          height: 92px;
          margin-right: 10px;
        }
        .info {
          span {
            color: #606060;
            line-height: 34px;
            padding-right: 20px;
          }
        }
      }
      .r-item {
        display: inline-block;
        &.input {
          width: 170px
        }
        &.textarea {
          width: 610px;
        }
        .tip {
          display: inline-block;
          padding-top: 8px;
          color: #A6A6A6
        }
        ul {
          li {
            width: 90px;
            height: 90px;
            float: left;
            margin-right: 5px;
          }
        }
      }
    }
    .sub-btn {
      margin: 20px 0 auto 66px
    }
    .top-title {
      padding-bottom: 14px;
      border-bottom: 1px solid #dddddd;
      p {
        font-size: 18px;
        line-height: 28px;
      }
    }
    .history-list {
      padding-top: 20px;
      & > p {
        font-size:14px;
      }
      .history-info {
        .h-item {
          padding: 16px 0;
          border-bottom: 1px solid #dddddd;
          &:last-child {
            border-bottom: none
          }
        }
        .icon-img {
          width: 42px;
          height: 42px;
          margin-right: 10px;
        }
        .title-all {
          position: relative;
        }
        .time {
          position: absolute;
          right: 0;
        }
        .info {
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
  }
  .m-right {
    width: 250px;
    min-height: 700px;
    padding: 20px 16px;
    display: inline-block;
    border-left: 1px solid #dddddd;
    .tit {
      font-size: 14px;
      margin-bottom: 10px
    }
    .goods {
      &:after {
        content: '';
        color: #dddddd;
        width: 100%;
        height: 1px;
        border-top: 1px solid;
        margin: 30px 0 20px 0;
        visibility: visible;
      }
      .img {
        width: 92px;
        height: 92px;
        margin-right: 10px;
        display: inline-block;
      }
      .info {
        width: 48%;
        display: inline-block;
        span {
          color: #606060;
          line-height: 20px;
        }
      }
    }
    .order-info {
      .or-item {
        margin-bottom: 10px;
        .title {
          color: #606060
        }
        // 三角形
        .trangle {
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-left: 4px;
          cursor: pointer;
          margin-bottom: 2px;
          background: url(../my/assets/down.png) no-repeat;
          &.actived {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
}
</style>
